/*
 * @Author: mingming.shan
 * @Effect: 纠错页面
 * @Date: 2018-06-25 15:54:11
 * @Last Modified by: zhangtao.zhou
 * @Last Modified time: 2018-12-27 10:46:29
 */
<template>
  <div class="correction-page-wrapper">
    <div class="selected-type-wrapper">
      <div class="select-list-tip xb_border_bottom eee">请选择您要反馈的问题类型</div>
      <ProblemTypeBtnList :btnlist.sync="btnArr"
        :selectedId.sync="selectedId"></ProblemTypeBtnList>
    </div>
    <div class="photo-and-text-wrapper flex-v flex-he">
      <textarea v-model="problemContent"
        class="problem-content flex1"
        name="problem-content"
        placeholder="请输入遇到的问题或建议"
        maxlength="200">
      </textarea>
      <span>{{problemContent.length}}/200</span>
    </div>
    <div class="phone-input-wrapper flex-h flex-vc">
      <input type="tel"
        v-model="phoneNumber"
        class="phone-input fontsize28"
        placeholder="请输入您的联系人方式（选填）">
    </div>

    <ImgItemList :imglist.sync="imglist"></ImgItemList>

      <div class="problem-submit-btn flex-h flex-hc flex-vc fontsize28 problem-submit-btn-active"
        @click="submitProblem">提交</div>
    </div>
</template>
<style>
/* 纠错页面包裹层 */
.correction-page-wrapper {
  box-sizing: border-box;
  height: 100%;
  width: 100%;
}
/* 选择列表包裹层 */
.selected-type-wrapper {
  background-color: #ffffff;
  padding: 0px 32px 32px 32px;
}
/* 顶部提示语 */
.select-list-tip {
  height:92px;
  line-height:92px;
  color: #000;
  font-size:16px;/*no*/
}
/* 文字和图片包裹层 */
.photo-and-text-wrapper {
  margin-top: 32px;
  width: 100%;
  height:240px;
  box-sizing: border-box;
  background-color: #ffffff;
  padding: 16px 32px;
}
.photo-and-text-wrapper>span:first-of-type{
  width:100%;
  text-align: right;
  color:#999;
  font-size:14px;/*no*/
  line-height:20px;/*no*/
}
/* 问题内容 */
.problem-content {
  width: 100%;
  font-size:14px;/*no*/
  line-height:20px;/*no*/
  overflow: auto;
  resize: none;
  outline: none;
  border: none;
}
/* 手机号输入框包裹层 */
.phone-input-wrapper {
  box-sizing: border-box;
  background-color: #ffffff;
  margin-top: 32px;
  width: 100%;
  height: 112px;
  padding:0px 32px;
}
/* 手机号输入框 */
.phone-input {
  width: 100%;
  border: none;
  outline: none;
  font-size:16px;/*no*/
  line-height:22px;/*no*/
  color:#999;
}
/* 占位提交按钮高度 */
.set-submit-height {
  height: 170px;
}
/* 提交按钮包裹层 */
.submit-btn-wrapper {
  /* position: fixed; */
  bottom: 0;
  box-sizing: border-box;
  width: 100%;
  height: 72px;
  padding: 30px 30px 0px;
  background-color: #f2f5f6;
}
/* 提交按钮样式 */
.problem-submit-btn {
  color: #ffffff;
  height: 72px;
  width:686px;
  margin:64px 32px;
  border-radius: 36px;

}
/* 提交按钮未激活 */
.problem-submit-btn-no-active {
  background-color: #cccccc;
}
/* 提交按钮激活样式 */
 .problem-submit-btn-active {
   background:linear-gradient(90deg,rgba(39,132,255,1) 0%,rgba(78,129,250,1) 100%);
}
</style>
<script>
/// <reference path="../../../plugins/nativePlugin.d.ts"/>
import ProblemTypeBtnList from '../components/problem-type-btn-list'
import ImgItemList from '../components/img-item-list'
import { getFeedbackType, addLineFeedback, getOssDec } from '../api/api.js'
import { AppRouterUtils } from 'vue-xiaobu-utils'

import { setTimeout } from 'timers'
export default {
  components: {
    ProblemTypeBtnList,
    ImgItemList
  },
  mounted: function() {
    let self = this
    // 获取上传配置
    getOssDec().then(res => {
      self.ossConfig.bucket = res.bucket
      self.ossConfig.endpoint = res.endpoint
      self.ossConfig.ossPath = res.ossPath
    })

    getFeedbackType().then(list => {
      self.btnArr = list
    })
  },
  computed: {
    // 是否有不当信息or空白
    hasBlank: function() {
      if (!this.selectedId || this.selectedId === '') {
        // 问题未选择
        return 1
      }
      if (!this.problemContent || this.problemContent === '') {
        // 问题内容未填写
        return 2
      }
      if (this.phoneNumber !== '' && !/^1\d{10}$/.test(this.phoneNumber)) {
        // 手机号不正确
        return 3
      }
      return 0
    },
    // 提交按钮是否可按
    submitActive: function() {
      // return this.selectedId && this.selectedId !== ''
      return true
    }
  },
  data() {
    return {
      ossConfig: {
        bucket: '',
        endpoint: '',
        ossPath: ''
      },
      btnArr: [],
      selectedId: '',
      imglist: [],
      problemContent: '',
      phoneNumber: '',
      uploadedImgList: [],
      hasSubmited: false
    }
  },
  methods: {
    // 提交问题
    submitProblem() {
      let self = this
      if (!self.hasSubmited && self.submitActive) {
        if (self.hasBlank) {
          // 表单有问题
          self.$Toast.then(Toast => {
            if (Toast) {
              let msg = ''
              switch (self.hasBlank) {
                case 1:
                  msg = '请选择您要反馈的问题类型'
                  break
                case 2:
                  msg = '请输入您要反馈的内容'
                  break
                case 3:
                  msg = '请输入正确的手机号码'
                  break
                default:
                  break
              }
              Toast.showShortBottom(
                msg,
                () => {
                  // 成功
                },
                err => {
                  // 报错
                  console.dir(err)
                }
              )
            }
          })
        } else {
          // 可以提交
          self.hasSubmited = true
          if (self.imglist.length > 0) {
            let req = {
              bucket: self.ossConfig.bucket,
              endpoint: self.ossConfig.endpoint,
              ossPath: self.ossConfig.ossPath,
              files: self.imglist.map(i => {
                // 拼接文件oss路径，文件名为 {原文件名_时间戳.文件后缀}
                let filename = i.url.slice(i.url.lastIndexOf('/'))
                let suffixName = filename.slice(filename.lastIndexOf('.'))
                filename = filename.slice(0, filename.lastIndexOf('.'))
                filename += `_${new Date().getTime() + suffixName}`
                filename = `${self.ossConfig.ossPath + filename}`
                return {
                  filePath: i.url,
                  ossPath: filename
                }
              })
            }
            self.$System.then(System => {
              if (System) {
                System.uploadFiles(
                  req,
                  arr => {
                    console.log(arr)
                    self.uploadedImgList = arr
                    self.addFeedback()
                  },
                  err => {
                    console.dir(err)
                    self.hasSubmited = false
                  }
                )
              }
            })
          } else {
            self.addFeedback()
          }
        }
      }
    },
    // 提交后端
    addFeedback() {
      let self = this
      let selectedBtn = self.btnArr.find(item => item.id === self.selectedId)
      return addLineFeedback(
        selectedBtn.id,
        selectedBtn.name,
        self.problemContent,
        self.uploadedImgList.length > 0 ? self.uploadedImgList : undefined,
        self.phoneNumber && self.phoneNumber !== ''
          ? self.phoneNumber
          : undefined
      )
        .then(res => {
          self.$Toast.then(Toast => {
            if (Toast) {
              Toast.showShortBottom('提交成功')
            }
            setTimeout(() => {
              AppRouterUtils.goBack()
            }, 500)
          })
        })
        .catch(e => {
          self.hasSubmited = false
        })
    }
  }
}
</script>
